<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .tab {
            margin-top: 40px;
        }

        .tab ul {
            width: 80%;
            height: 50px;
            list-style: none;
            line-height: 50px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgb(169, 169, 169);
        }

        li {
            text-align: center;
            width: 20%;
        }

        .tab_body {
            width: 80%;
            margin: 20px auto;
        }

        .tab_body>ul {
            height: 0 !important;
            border-bottom: none !important;
            display: unset !important;
        }

        .li {
            list-style: none;
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid black;
        }
        img {
            padding: 0;
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .list {
            position: absolute;
            padding-left: 150px;
            width: 70%;

        }
        p {
            margin-left: 100px;
            font-size: 10px;
            text-align: left;
        }

        h4 {
            width: 600px;
            height: 40px;
            line-height: 40px;
            margin-top: 2px;
        }

        .tab_head li {
            cursor: pointer;
        }
        .tab-hover {
            color: red;
            border-bottom: 5px solid red;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_head">
            <ul>
                <li>精选</li>
                <li>游戏</li>
                <li>手机</li>
                <li>数码</li>
                <li>产品</li>
            </ul>
        </div>
        <div class="tab_body">
            <ul></ul>
        </div>
        <script>
            let li = document.querySelector('ul').querySelectorAll('li');
            let list = document.querySelector('.tab_body').querySelector('ul');
            let arr = [
                {
                    img: './bjt2.png',
                    title: '这是精选页面',
                    message: '每次在晚上出去的时候，我总是会被沿途各式各样的美景所吸引，这时就忍不住拿出手机拍一下，奈何手机的夜拍功能不是很好，就很失望，我也不可能把相机随身携带，就想着给自己重新换一款夜晚拍照能给力的手机，选来选去最终还是将目光锁定在了vivo手机上，之前一直用的都是它家的，这次新出了S9想必也是不错的，果断选择入手。'
                },
                {
                    img: './play.jpg',
                    title: '这是游戏页面',
                    message: '随着手游的爆火，13日，小米推出了旗下首款“游戏手机”黑鲨手机。此前，雷蛇推出了自己的“游戏手机”雷蛇手机，而努比亚的红魔游戏手机也将在19日发布。接下来我们盘点一下最近有点火的游戏手机。'
                },
                {
                    img: './bjt3.jpg',
                    title: '这是手机页面',
                    message: ' 华为P10有多快？跟iPhone7P比比就知道！'
                },
                {
                    img: './timer.jpg',
                    title: '这是数码页面',
                    message: '4月底，两辆FF91电动车从中国海关清关，运往乐视汽车位于北京酒仙桥的办公地点电通大厦。'
                },
                {
                    img: './bjt1.png',
                    title: '这是产品页面',
                    message: '燃爆！安踏联合NASA推出“虫洞”跑鞋，这设计感满分'
                },
            ];
            console.log(list);
            setTabHover(0);
            function setTabHover(index = 0) {
                const dataList = [arr[index]];
                const headList = document.querySelectorAll('.tab_head li');
                console.log(headList)
                headList.forEach((headItem, itemIndex) => {
                    if (itemIndex === index) {
                        headItem.className = "tab-hover";
                    } else {
                        headItem.className = "";
                    }
                })
                renderContentList(dataList);
            }
            function renderContentList(dataList) {
                const tabBody = document.querySelector('.tab_body');
                console.log(tabBody);
                if (tabBody) {
                    const contentList = dataList.map((item, index) => renderContentItem(item, index));
                    console.log(contentList)
                    tabBody.innerHTML = `<ul>${contentList.join('')}</ul>`
                }
            }
            function renderContentItem(item, index) {
                const { title, img, message } = item;
                return `<div class="li">
                    <img src="${img}" />
                    <div class="list">
                        <h4>${title}</h4>
                        <p>${message}</p>
                </div>`
            }
            document.querySelectorAll(".tab_head li").forEach((el, index) => {
                el.addEventListener("click", (ev) => {
                    setTabHover(index);
                })
            });
        </script>
    </div>
</body>

</html>